<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <router-link v-if="from === 'fenrun'" :to="'/platform/split/money'" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
        <router-link v-if="from === 'mer'" :to="'/platform/mer/settle'" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
        <router-link v-if="from === 'order'" :to="'/orders/list'" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
        <router-link v-if="from === 'devices'" :to="'/orders/devices'" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>
        <router-link v-if="from === 'chart'" :to="'/statistics'" class="link-type">
          <el-button icon="el-icon-back" size="mini">
            返 回
          </el-button>
        </router-link>

      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"/>
    </el-row>

    <el-card class="box-card" el-card__headerbg>
      <div slot="header" class="clearfix">
        <span>订单详情</span>
      </div>

      <!-- 可以使用span 和 span-map对象来控制栅格的大小 -->
      <el-description >
        <el-description-item label="订单编号" :value="order.orderNo" :span="6"/>
        <el-description-item label="订单状态" v-if="order.status === 0" :span="6" value="未支付"/>
        <el-description-item label="订单状态" v-if="order.status === 1" :span="6" value="待支付"/>
        <el-description-item label="订单状态" v-if="order.status === 2" :span="6" value="已支付"/>
        <el-description-item label="订单状态" v-if="order.status === 3" :span="6" value="已核销"/>
        <el-description-item label="订单状态" v-if="order.status === 4" :span="6" value="已评价"/>
        <el-description-item label="订单状态" v-if="order.status === 5" :span="6" value="订单取消"/>
        <el-description-item label="订单状态" v-if="order.status === 6" :span="6" value="已申请退货"/>
        <el-description-item label="订单状态" v-if="order.status === 7" :span="6" value="同意退货"/>
        <el-description-item label="订单状态" v-if="order.status === 8" :span="6" value="退货完成"/>
        <el-description-item label="订单状态" v-if="order.status === 9" :span="6" value="拒绝退货"/>
        <el-description-item label="订单状态" v-if="order.status === 10" :span="6" value="已完成"/>


        <el-description-item label="下单时间" :value="order.createTime" :span="6"/>
        <el-description-item label="支付时间" :value="order.payTime" :span="6"/>
        <el-description-item label="所属物业" :value="order.propertyName" :span="6"/>
        <el-description-item label="所属小区" :value="order.estateName" :span="6"/>
        <el-description-item label="用户名称" :value="order.realName" :span="6"/>
        <el-description-item label="用户手机号" :value="order.appointmentPhone" :span="6"/>



        <el-description-item label="业主分成" :value="order.proprietorSplit" :span="6">
          <template slot="content">
            {{order.proprietorSplit+' z元'}}
          </template>
        </el-description-item>

        <el-description-item label="物业分成" :value="order.propertySplit" :span="6">
          <template slot="content">
            {{order.propertySplit+' 元'}}
          </template>
        </el-description-item>

        <el-description-item label="平台分成" :value="order.platformSplit" :span="6">
          <template slot="content">
            {{order.platformSplit+' 元'}}
          </template>
        </el-description-item>


        <el-description-item label="平台抽成" :value="order.merFee" :span="6">
          <template slot="content">
            {{order.merFee+' 元'}}
          </template>
        </el-description-item>
        <el-description-item label="商家清算金额" :value="order.merSettlement" :span="6">
          <template slot="content">
            {{order.merSettlement+' 元'}}
          </template>
        </el-description-item>




        <el-description-item label="订单类型" value="商家订单" :span="6"  v-if="order.orderType === 0"/>

        <el-description-item label="订单类型" value="设备订单" :span="6"  v-if="order.orderType === 1"/>

        <el-description-item label="订单类型" value="商家优惠券" :span="6"  v-if="order.orderType === 2"/>

        <el-description-item label="订单类型" value="线下支付" :span="6"  v-if="order.orderType === 3"/>

        <el-description-item label="使用抵扣券" value="线下支付" :span="6"  v-if="order.couponId > 0">
          <template slot="content">
            {{order.couponName}}
          </template>
        </el-description-item>

        <el-description-item label="抵扣券抵扣金额" value="线下支付" :span="6"  v-if="order.couponId > 0">
          <template slot="content">
            {{order.couponDikouPrice+' 元'}}
          </template>
        </el-description-item>

        <el-description-item label="总订单金额" :value="order.totalPrice+'元'" :span="6"/>
        <el-description-item label="支付金额" :value="order.payPrice+'元'" :span="6"/>
        <el-description-item label="结算状态" v-if="order.settlementState == 0" value="未结算" :span="6"/>
        <el-description-item label="结算状态" v-if="order.settlementState == 1" value="已结算" :span="6"/>

        <el-description-item label="用户地址" :span="6">
          <!--  使用名称为conent的slot来定制-->
          <template slot="content">
            {{order.address}}
          </template>
        </el-description-item>

        <el-description-item label="核销码" :value="order.verifyCode" :span="6"/>
        <el-description-item label="备注信息" :value="order.remark" :span="6"/>
<!--        <el-description-item label="物业公司分润" :value="order.propertySplit+'元'" :span="6"/>-->
<!--        <el-description-item label="业主分润" :value="order.proprietorSplit+'元'" :span="6"/>-->

      </el-description>
    </el-card>

    <el-table v-loading="loading" :data="orderList" style="margin-top: 20px;" v-if="order.orderType === 0">
<!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="核销码" align="center" prop="verifyCode"/>
      <el-table-column label="商品名称" align="center" prop="productName" />
      <el-table-column label="商品规格名" align="center" prop="skuName" />
      <el-table-column label="商品单价" align="center" prop="singlePrice" >
        <template slot-scope="scope">{{scope.row.singlePrice}}元</template>
      </el-table-column>
      <el-table-column label="购买数量" align="center" prop="count" />
      <el-table-column label="订单总价" align="center" prop="totalMoney">
        <template slot-scope="scope">{{scope.row.totalMoney}}元</template>
      </el-table-column>
      <el-table-column label="业主分成" align="center" prop="proprietorSplit">
        <template slot-scope="scope">{{scope.row.proprietorSplit}}元</template>
      </el-table-column>
      <el-table-column label="物业分成" align="center" prop="propertySplit">
        <template slot-scope="scope">{{scope.row.propertySplit}}元</template>
      </el-table-column>
      <el-table-column label="平台抽成" align="center" prop="merFee">
        <template slot-scope="scope">{{scope.row.merFee}}元</template>
      </el-table-column>
      <el-table-column label="结算金额" align="center" prop="merSettlement">
        <template slot-scope="scope">{{scope.row.merSettlement}}元</template>
      </el-table-column>
      <el-table-column label="核销状态" align="center" prop="isVerify">
        <template slot-scope="scope">
          <div>
            <!-- 订单状态 0 - 未支付   1 - 待支付  2 - 已支付  3 - 已核销 4 - 已评价
            5 - 订单取消  6 - 已申请退货  7 - 同意退货  8 - 退货完成 9 - 拒绝退货 10 - 已完成 -->
            <el-tag v-if="scope.row.isVerify == 0" style="cursor: pointer" :type="'info'">未核销</el-tag>
            <el-tag v-if="scope.row.isVerify == 1" style="cursor: pointer" :type="'primary'">已核销</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="结算打款状态" align="center" prop="isVerify">
        <template slot-scope="scope">
          <div>
            <!-- 提现支付状态 0 - 待审核 1 - 支付成功  2 - 支付失败  3 - 拒绝支付-->
            <el-tag v-if="scope.row.cashRecord!=null && scope.row.cashRecord.payState == 0" style="cursor: pointer" :type="'warning'">未支付</el-tag>
            <el-tag v-else-if="scope.row.cashRecord!=null && scope.row.cashRecord.payState == 1" style="cursor: pointer" :type="'success'">支付成功</el-tag>
            <el-tag v-else-if="scope.row.cashRecord!=null && scope.row.cashRecord.payState == 2" style="cursor: pointer" :type="'danger'">支付失败</el-tag>
            <el-tag v-else-if="scope.row.cashRecord!=null && scope.row.cashRecord.payState == 3" style="cursor: pointer" :type="'danger'">拒绝支付</el-tag>
            <el-tag v-else style="cursor: pointer" :type="'warning'">未支付</el-tag>
          </div>
        </template>
      </el-table-column>



    </el-table>

    <pagination v-show="total > 0" v-if="order.orderType === 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"/>
  </div>
</template>

<script>
import { listInfo, getInfo,  } from "@/api/module/product/orderinfo";
// 引入组件
import ElDescription from '@/components/Description'
import ElDescriptionItem from '@/components/Description/item'

export default {
  name: "Order",
  components:{
    ElDescription, ElDescriptionItem
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      dateRange:[],
      // 总条数
      total: 0,
      // 订单表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderId:undefined,
        status:undefined,
        merId:undefined,
        orderNo: undefined,
        beginDate:undefined,
        endDate:undefined,
        appointmentPhone:undefined,
      },
      orderId:undefined,
      from:undefined,
      order:{},
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    console.log('orderinfo  this.$route.query',this.$route.query);
    this.orderId = this.$route.query.orderId ? this.$route.query.orderId : 0;
    this.queryParams.orderId = this.$route.query.orderId ? this.$route.query.orderId : 0;
    this.from =  this.$route.query.from ? this.$route.query.from : 'order';
    this.getList();
  },
  methods: {
    /** 查询订单列表 */
    getList() {
      this.loading = true;
      console.log(1);
      listInfo(this.queryParams).then(response => {
        console.log(1);
        console.log(response.otherData.order);
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
        this.order = response.otherData.order;

      });
    },
  }
};
</script>
<style scoped lang="scss">
  .el-card__headerbg{
    background-color: #dcdada;
  }
</style>
